<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <button
        v-bind:class="{'active': curActiveBtn === 1}"
        v-on:click="curActiveBtn = 1"
      >
        按钮1
      </button>
      <button
        v-bind:class="{'active': curActiveBtn === 2}"
        v-on:click="curActiveBtn = 2"
      >
        按钮2
      </button>
      <button
        v-bind:class="{'active': curActiveBtn === 3}"
        v-on:click="curActiveBtn = 3"
      >
        按钮3
      </button>

      <hr />
      <input type="button" value="添加" v-on:click="fruits.push('西瓜')" />
      <ul>
        <li v-for="item in fruits">{{ item }}</li>
      </ul>
    </div>

    <!-- 引入 Vue 类库 -->
    <script src="../lib/vue.js"></script>
    <script>
      new Vue({
        el: "#app",

        data: {
          curActiveBtn: 1,
          fruits: ["Apple", "Banana", "Orange"],
        },

        methods: {
          add() {
            const hello = () => {};
          },
        },
      });
    </script>
  </body>
</html>
